
<template>
    <div class="forumItemContainer" @click="goDetail">
        <div class="left">
            <div class="upper">
                <div class="userPart">
                    <img :src="userInfo.picUrl" alt="头像">
                    <div class="userName">{{userInfo.nickname}}</div>
                </div>
                <div class="commentBtn" @click.stop="deleteComment" v-if="showOp">删除</div>
                <div class="posttime">评论发表: <TimeDiff :dateString="commentItem.postTime" /></div>
            </div>
        </div>
        <div class="contentContainer">
            <div class="contentPart">
                <div class="ql-editor content" v-html="commentItem.content"></div>
            </div>
        </div>
        <div class="bottomLine"></div>
    </div>
</template>

<script>
import identicon from 'identicon.js'
import TimeDiff from "./TimeDiff.vue";
import "quill/dist/quill.core.css"
export default {
    name: 'ForumItem',
    props:['commentItem'],
    components:{
        TimeDiff
    },
    data(){
        return {
            userInfo:{},
            showOp:false,
        }
    },
    methods:{
        goDetail(){
            this.$router.push({
                name:'commentDetail',
                query:{
                    commentId:this.commentItem.commentId
                }
            })
        },
        deleteComment(){
            // console.log(this.commentItem.commentId)
            this.$axios({
                method:'delete',
                url:`/api/comments/deleteId/${this.commentItem.commentId}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                // console.log(res)
                if(res.data.code){
                    this.$emit('deleteComment',this.commentItem.id)
                }
            })
        },
        request(){
            if(this.commentItem.userId == localStorage.getItem('userId')||localStorage.getItem('uType')==0){
                this.showOp = true
            }
            this.$axios({
                method:'get',
                url:`/api/users/${this.commentItem.userId}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                if(res.data.code){
                    this.userInfo = res.data.data
                    
                    if(res.data.data.picUrl==null||res.data.data.picUrl==''){
                        this.userInfo.picUrl = 'data:image/png;base64,'+new identicon(this.md5(res.data.data.nickname), 420).toString()
                    }
                }
            })
        }
    },
    mounted(){
        this.request();
    },
}
</script>
   
<style scoped>
    .forumItemContainer{
        width: 60%;
        margin-left: 20%;
        margin-top: 1%;
        padding-bottom: 1%;
    }
    .forumItemContainer:hover{
        /* background-color: #fff; */
        cursor: pointer;
    }
    .upper{
        /* background-color: aqua; */
        width: 97%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .userName{
        margin-left: 10px;
        font-size: 1.3em;
        color: #fff;
    }
    .userPart{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .userPart img{
        width: 10%;
        height: 10%;
        border-radius: 50%;
    }
    .posttime{
        width: 15%;
        font-size: 0.85em;
        color: #aaa;
    }
    .contentContainer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 95%;
        height: 100%;
        margin-left: 2.5%;
        margin-top: 1%;
    }
    .contentPart{
        width: 95%;
        /* background-color: #fff; */
    }
    .content{
        margin-top: 3%;
        font-size: 1.3em;
        color: #fff;
        font-family: 'SimHei';
        word-wrap: break-word;
    }
    .bottomLine{
        width: 94%;
        margin-top: 0%;
        border-bottom: 1px solid #aaa;
    }
    .commentPart{
        /* background-color: #fff */
        width: 10%;
        margin-left: 5%;
        margin-right: -2%;
        text-align: center;
        /* 让字垂直居中 */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #aaa;
    }
    .commentBtn{
        width: 30px;
        border-radius: 5px;
        background-color: #4d4d4d;
        color: #aaa;
        /* border: 1px solid white; */
        outline: none;
        cursor: pointer;
        font-size: 0.85em;
    }
    .commentBtn:hover{
        color: pink;
    }
</style>
